<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps, UserOption, AgentOption } from "./utils/types";
import { hasPerms } from "@/utils/auth";

interface Props extends FormProps {
  userOptions?: UserOption[];
  agentOptions?: AgentOption[];
}

const props = withDefaults(defineProps<Props>(), {
  formInline: () => ({
    user_id: "",
    consumption_date: "",
    ad_plan_id: 0,
    agent_id: "",
    total_amount: ""
  }),
  userOptions: () => [],
  agentOptions: () => []
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

// 错误状态管理
const submitError = ref('');
const submitLoading = ref(false);

function getRef() {
  return ruleFormRef.value;
}

function clearError() {
  submitError.value = '';
}

function setError(error: string) {
  submitError.value = error;
}

function setLoading(loading: boolean) {
  submitLoading.value = loading;
}

defineExpose({ getRef, clearError, setError, setLoading });
</script>

<template>
  <!-- 错误提示区域 -->
  <el-alert
    v-if="submitError"
    :title="submitError"
    type="error"
    :closable="true"
    @close="clearError"
    style="margin-bottom: 20px;"
    show-icon
  />
  
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="30">
      <re-col :span="12">
        <el-form-item label="投放人员" prop="user_id">
          <el-select
            v-model="newFormInline.user_id"
            class="w-full"
            placeholder="请选择投放人员"
            filterable
            clearable
          >
            <el-option
              v-for="option in props.userOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </re-col>

      <re-col v-if="hasPerms(['assets:btn:add_plan_record'])" :span="12">
        <el-form-item label="广告计划" prop="ad_plan_id">
          <el-radio-group v-model="newFormInline.ad_plan_id">
            <el-radio :value="0">计划1</el-radio>
            <el-radio :value="1">计划2</el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>

      <re-col :span="12">
        <el-form-item label="消耗日期" prop="consumption_date">
          <el-date-picker
            v-model="newFormInline.consumption_date"
            type="date"
            class="w-full"
            placeholder="请选择消耗日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </re-col>

      <re-col :span="12">
        <el-form-item label="代理商" prop="agent_id">
          <el-select
            v-model="newFormInline.agent_id"
            class="w-full"
            placeholder="请选择代理商"
            filterable
            clearable
          >
            <el-option
              v-for="option in props.agentOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
      </re-col>

      <re-col :span="12">
        <el-form-item label="消耗金额" prop="total_amount">
          <el-input
            v-model="newFormInline.total_amount"
            class="w-full"
            placeholder="请输入消耗金额"
            type="number"
            step="0.01"
            min="0.01"
            max="999999999.99"
          />
          <div class="text-sm text-gray-500 mt-1">
            <!-- 最小金额：$0.01，最大金额：$999,999,999.99 -->
          </div>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style scoped>
.w-full {
  width: 100%;
}
</style> 